<template>
	<view class="bj" @click="videoClick">
		<view class="videoBox">
			<img src="http://spnrxma3o.hb-bkt.clouddn.com/images/_____20241212095951.png" alt="" class="responsive-img">
		</view>
		<view class="textBox mt-10">
			{{data.description}}
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			data: {
				type: Object,
				default: {}
			},
		},
		methods: {
			videoClick() {
				this.$emit('click')
			},
		},
	}
</script>

<style scoped>
	.videoBox {
		height: 100px;
		width: 100%;
		/* 确保 videoBox 占据其父容器的全部宽度 */
		overflow: hidden;
		/* 防止图片溢出 */
	}

	.responsive-img {
		width: 100%;
		/* 图片宽度为父容器的100% */
		height: auto;
		/* 保持图片的比例 */
		display: block;
		/* 移除图片下的空白空间 */
		object-fit: cover;
		/* 确保图片覆盖整个区域，同时保持比例 */
	}

	.textBox {
		font-size: 24rpx;
		color: #666666;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.bj {
		background-color: #fff;
		padding: 10px;
		padding-top: 0px;
	}
</style>